从0搭建Vite + Vue3 + Element |
您所在的位置：网站首页 › vue3 typescript eslint › 从0搭建Vite + Vue3 + Element |
从0搭建Vite + Vue3 + Element
|
仓库地址，欢迎使用、Star。
为何使用 Vite
快速的冷启动
即时的模块热更新
真正的按需编译
初始化项目
使用官网提供的命令快速创建一个 Vue3.0 + Vite2.0 的项目。
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
复制代码
添加 Element-ui
注意：我们需要引入的是 element-plus 而不是 element-ui（element-plus 适配的是 Vue3.0）。
组件全部加载
yarn add -S element-plus
复制代码
修改 main.js
import { createApp } from 'vue';
import App from './App.vue';
+ import ElementPlus from 'element-plus';
+ import 'element-plus/lib/theme-chalk/index.css';
+ const App = createApp(App);
+ App.use(ElementPlus);
+ App.mount('#app');
- createApp(App).mount('#app');
复制代码
组件按需加载
使用插件
使用vite-plugin-babel-import
yarn add vite-plugin-babel-import -D
复制代码
修改 vite.config.js
+ import vitePluginImport from 'vite-plugin-babel-import';
export default defineConfig({
...
plugins: [
...,
+ vitePluginImport([
+ {
+ libraryName: 'element-plus',
+ libraryDirectory: 'es',
+ style(name) {
+ return `element-plus/lib/theme-chalk/${name}.css`;
+ },
+ },
+ ])
]
})
复制代码
使用 vite-plugin-style-import
yarn add vite-plugin-style-import -D
复制代码
修改 vite.config.js
注意 styleImport 这个名字不能改
+ import styleImport from 'vite-plugin-style-import';
export default defineConfig({
...
plugins: [
...,
+ styleImport({ // 注意 styleImport 这个名字不能改
+ libs: [{
+ libraryName: 'element-plus',
+ esModule: true,
+ ensureStyleFile: true,
+ resolveStyle: (name) => { // 引入 .scss 样式
+ // eslint-disable-next-line no-param-reassign
+ name = name.slice(3);
+ return `element-plus/packages/theme-+halk/src/${name}.scss`;
+ },
+ // resolveStyle: (name) => `element-plus/lib/theme-chalk/${name}.css`, // 引入 .css 样式
+ resolveComponent: (name) => `element-+lus/lib/${name}`,
+ }],
+ }),
]
})
复制代码
修改 main.js
// @需要配置src路径别名，后面会讲到
+ import element from '@/common/element/components';
- import ElementPlus from 'element-plus';
- import 'element-plus/lib/theme-chalk/index.css';
+ // 设置全局统一属性
+ app.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 };
// 注册 element 组件 插件
element(app);
复制代码
增加 components.js
// src/common/element/components.js'
import {
ElAlert,
ElAside,
..., // 引入所需组件
ElInfiniteScroll,
... // 引入所需插件
];
export const components = [
ElAlert,
ElAside,
...
]
export const plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
];
// 统一注册
export default (app) => {
components.forEach((component) => {
app.component(component.name, component);
});
plugins.forEach((plugin) => {
app.use(plugin);
});
};
复制代码
添加 ESLint
我一直习惯用的是 airbnb 那套规范，你也可以选择其他的。
yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue
复制代码
增加 ESLint 的配置文件 .eslintrc.js。
module.exports = {
extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['vue'],
rules: {
// 自己配置的规则
indent: [2, 4],
'no-unused-vars': [2, {
vars: 'all', // "local",允许声明未使用变量
args: 'all', // 检查所有参数
}],
},
overrides: [
{
files: ['*.vue'],
rules: {
// 这里写覆盖vue文件的规则
'no-unused-vars': [0],
},
},
],
};
复制代码
配合 VS Code 插件 beautify，简单报错保存自动修复。所有规则
// settings.json
{
...,
"editor.formatOnSave": true, // #每次保存的时候自动格式化
"editor.codeActionsOnSave": { // 自动修复
"source.fixAll.eslint": true,
},
"eslint.validate": ["javascript", "vue", "html"],// 配置 ESLint 检查的文件类型
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [".js", ".vue", ".ts", ".tsx"]
},
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"//在这里加上vue
]
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
}
复制代码
添加 ESLint 忽略检查的配置文件 .eslintignore
// 根据自己需要可以自行添加
/node_modules
/dist
*.html
复制代码
添加 SASS 预处理
安装
yarn add -D sass
复制代码
Vite 引入SASS全局变量/样式，Vite1.0和2.0的写法不太一样，有变化请 查看文档。
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
...,
css: {
preprocessorOptions: {
scss: { // 注意：键名是scss不是sass！
// 这里写你想导入全局scss变量的路径，注意只能写相对路径，alias貌似在css中不会生效
additionalData: "@import './src/assets/scss/reset.scss';@import './src/assets/scss/variable.scss';",
},
},
},
plugins: [vue()],
});
复制代码
增加别名配置
修改 vite.config.js。
// vite.config.js
+ import path from 'path';
export default defineConfig({
+ resolve: {
+ alias: [{
+ find: '@',
+ replacement: path.join(__dirname, 'src'),
+ },],
+ },
...
});
复制代码
修改 .eslintrc.js。
// .eslintrc.js
module.exports = {
+ settings: { // @路径引入的文件也需要校验
+ 'import/resolver': {
+ alias: {
+ map: [
+ ['@', './src'],
+ ],
+ extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
+ },
+ },
+ },
...
}
复制代码
配置好后，发现使用 @ 引入文件还是在报错。
home - Login + + {{$t("user.changeLang")}} + +{{$t("user.name")}} + {{$t("home.toLogin")}} ... 复制代码 测试结果演示i18n-test.mov 往期精彩 「前端进阶」JavaScript手写方法/使用技巧自查 JavaScript设计模式之简介及创建型模式 公众号打开小程序最佳解决方案（Vue） Axios你可能不知道使用方式 「点赞、收藏和评论」❤️关注+点赞+收藏+评论+转发❤️，创作不易，鼓励笔者创作更好的文章，谢谢🙏大家。 |
【本文地址】
今日新闻 |
推荐新闻 |